<template>
  <el-dialog
    title="添加升级策略"
    :visible.sync="dialogVisible"
    width="600px"
  >
    <el-form
      ref="addUpgradeStrategyForm"
      :model="upgradeStrategyForm"
      :label-width="formLabelWidth"
      :show-message="false"
    >
      <el-form-item
        label="升级策略描述"
        prop="description"
        required
      >
        <el-input
          class="input"
          v-model="upgradeStrategyForm.description"
          placeholder="请输入升级策略描述"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选择升级包"
        prop="packageId"
      >
        <el-select
          class="input"
          v-model="upgradeStrategyForm.packageId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择升级包"
          :remote-method="remotePackageListSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="upgradePackage in upgradePackageList"
            :key="upgradePackage.id"
            :label="upgradePackage.name"
            :value="upgradePackage.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择设置项"
        prop="settingId"
      >
        <el-select
          class="input"
          v-model="upgradeStrategyForm.settingId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择设置项"
          :remote-method="remoteSettingListSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="setting in settingList"
            :key="setting.id"
            :label="setting.name"
            :value="setting.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否启用"
        prop="active"
      >
        <el-switch v-model="upgradeStrategyForm.active"></el-switch>
      </el-form-item>
      <el-form-item
        label="设备列表"
        prop="deviceUuidList"
      >
        <el-select
          class="input"
          v-model="upgradeStrategyForm.deviceUuidList"
          filterable
          remote
          multiple
          reserve-keyword
          placeholder="请选择设备"
          :remote-method="remoteDeviceListSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="device in deviceList"
            :key="device.uuid"
            :label="device.name"
            :value="device.uuid"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="add"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui';
import { parseError } from '../../../utils/index';
import { createUpgradeStrategyApi } from '../../../api/upgradeStrategy';
import { validateForm } from './service';
import { queryPackageListApi } from '../../../api/package';
import { queryDeviceSettingListApi } from '../../../api/deviceSetting';
import { queryDeviceListApi } from '../../../api/device';

export default {
  data() {
    this.formLabelWidth = '120px';
    return {
      remoteLoading: false,
      dialogVisible: false,
      btnLoading: false,
      upgradeStrategyForm: {
        description: '',
        packageId: '',
        settingId: '',
        active: true,
        deviceUuidList: []
      },
      upgradePackageList: [],
      settingList: [],
      deviceList: []
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) this.$refs.addUpgradeStrategyForm.resetFields();
      }
    }
  },
  created: function() {
    this.remotePackageListSearch();
    this.remoteSettingListSearch();
    this.remoteDeviceListSearch();
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    add() {
      const validError = validateForm(this.upgradeStrategyForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      createUpgradeStrategyApi(
        this.upgradeStrategyForm.description,
        parseInt(this.upgradeStrategyForm.packageId),
        parseInt(this.upgradeStrategyForm.settingId),
        this.upgradeStrategyForm.active,
        this.upgradeStrategyForm.deviceUuidList
      )
        .then(res => {
          Message.success('添加成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remotePackageListSearch(query) {
      this.remoteLoading = true;
      queryPackageListApi(query, 10)
        .then(upgradePackageList => (this.upgradePackageList = upgradePackageList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteSettingListSearch(query) {
      this.remoteLoading = true;
      queryDeviceSettingListApi(query, 10)
        .then(settingList => (this.settingList = settingList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteDeviceListSearch(query) {
      this.remoteLoading = true;
      queryDeviceListApi(query, 10)
        .then(deviceList => (this.deviceList = deviceList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
</style>
